<template>
	<view class="content">
		<uni-row>
			<uni-col :span="24" style="padding:5rpx;">
				<button size="mini" style="width: 100%;" @click="getUsbDevices">获取USB列表</button>
			</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="12" style="padding:5rpx;">
				<input type="text" v-model="usbDevice" style="height: 45rpx;width: 95%;border: 1px solid;padding: 5rpx;"></input>
			</uni-col>
			<uni-col :span="6" style="padding:5rpx;">
				<button size="mini" style="width: 100%;" @click="connect">连接</button>
			</uni-col>
			<uni-col :span="6" style="padding:5rpx;">
				<button size="mini" style="width: 100%;" @click="disconnect">断开</button>
			</uni-col>
		</uni-row>
		 <uni-row>
		 	<uni-col :span="24" style="padding:5rpx;">
		 		<button size="mini" style="width: 100%;" @click="getUsbConf">获取当前USB驱动配置</button>
		 	</uni-col>
		 </uni-row>
		 <textarea v-model="options" style="height: 150rpx;"></textarea>
		 <uni-row>
		 	<uni-col :span="24" style="padding:5rpx;">
		 		<button size="mini" style="width: 100%;" @click="setUsbConf">设置当前USB驱动配置</button>
		 	</uni-col>
		 </uni-row>
		 <uni-row>
		 	<uni-col :span="16" style="padding:5rpx;">
		 		<input type="text" v-model="formatL" style="height: 45rpx;width: 98%;border: 1px solid;padding: 5rpx;"></input>
		 	</uni-col>
		 	<uni-col :span="8" style="padding:5rpx;">
		 		<button size="mini" style="width: 100%;" @click="addUsblistener">打开监听</button>
		 	</uni-col>
		 </uni-row>
		<uni-row>
			<uni-col :span="9" style="padding:5rpx;">
				<input type="text" v-model="formatS" style="height: 45rpx;width: 95%;border: 1px solid;padding: 5rpx;"></input>
			</uni-col>
			<uni-col :span="7" style="padding:5rpx;">
				<input type="text" v-model="intervalTime" style="height: 45rpx;width: 95%;border: 1px solid;padding: 5rpx;"></input>
			</uni-col>
			<uni-col :span="8" style="padding:5rpx;">
				<button size="mini" style="width: 100%;" @click="sned">开始发送</button>
			</uni-col>
		</uni-row>
		<textarea v-model="snedData" style="height: 150rpx;"></textarea>
		<uni-row>
			<uni-col :span="9" style="padding:5rpx;">
				<input type="text" v-model="formatR" style="height: 45rpx;width: 98%;border: 1px solid;padding: 5rpx;"></input>
			</uni-col>
			<uni-col :span="7" style="padding:5rpx;">
				<input type="text" v-model="readLength" style="height: 45rpx;width: 95%;border: 1px solid;padding: 5rpx;"></input>
			</uni-col>
			<uni-col :span="8" style="padding:5rpx;">
				<button size="mini" style="width: 100%;" @click="read">读取数据</button>
			</uni-col>
		</uni-row>
		
		<view style="padding:10rpx;text-align: center;background-color:darkgray;color:width;">数据回调</view>
		<view class="callback" style="height: 200rpx;">
			<text>{{callback}}</text>
		</view>
		<view style="padding:10rpx;text-align: center;background-color:darkgray;color:width;">数据监听</view>
		<view class="callback" style="height: 200rpx;">
			<text>{{listeningToUsb}}</text>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const usbSerial = uni.requireNativePlugin("usb-serial-for-uniapp");
	var globalEvent = uni.requireNativePlugin('globalEvent');
	export default {
		data() {
			return {
				title: 'Hello Usb Serial',
				callback: 'Usb Serial callback',
				listeningToUsb: 'Usb Serial listener callback',
				snedData:"Data format string or hexString",
				usbDevice:"usb device name",
				options:"options example: \n {'baudRate':9600,'dataBits':8,'stopBits':1,'parity':0}",
				formatS:"String/HexString",
				formatL:"String/HexString",
				formatR:"String/HexString",
				intervalTime: 1000,
				readLength: 8192,
				msgType: 'success',
				messageText: '方法执行提示'
			}
		},
		onLoad() {
			var that = this;
			/**
			 * 端口监听方法，调用uniapp 监听事件 usbListener
			 * @param e 监听到的数据
			 */
			globalEvent.addEventListener('usbListener', function(e) {
			  that.listeningToUsb =e.time + ":\n" + e.data;
			});
		},
		methods: {
			/**
			 * 获取可用USB端口
			 * @return 所有USB驱动的列表
			 */
			getUsbDevices(){
				this.messageText="getUsbDevices";
				this.$refs.message.open()
				let json = usbSerial.getUsbDevices();
				this.callback=JSON.stringify(json);
				this.usbDevice=json.data[0].name;
			},
			/**
			 * 获取某个USB端口
			 * @param usbDevice 要打开的Usb Device name
			 * @return 成功或失败的提示，以JSON格式返回
			 */
			connect(){
				this.messageText="connect";
				this.$refs.message.open()
				let json = usbSerial.connect(this.usbDevice);
				this.callback=JSON.stringify(json);
			},
			/**
			 * 获取某个USB端口
			 * @return 成功或失败的提示，以JSON格式返回
			 */
			disconnect(){
				this.messageText="disconnect";
				this.$refs.message.open()
				let json = usbSerial.disconnect();
				this.callback=JSON.stringify(json);
			},
			/**
			 * 获取某个USB端口
			 * @return 关闭串口，成功或失败的提示，以JSON格式返回
			 * baudRate 波特率
			 * dataBits 数据位
			 * stopBits 停止位
			 * parity 校验位
			 */
			getUsbConf(){
				this.messageText="getUsbConf";
				this.$refs.message.open()
				let json = usbSerial.getUsbConf();
				this.options=json.data;
				this.callback=JSON.stringify(json);
			},
			/**
			 * 配置某个USB端口
			 * @param jsonStr JsonString 格式的参数
			 *      baudRate 波特率
			 *      dataBits 数据位
			 *      stopBits 停止位
			 *      parity 校验位
			 * @return 成功或失败的提示，以JSON格式返回
			 */
			setUsbConf(){
				this.messageText="setUsbConf";
				this.$refs.message.open()
				let json = usbSerial.setUsbConf(this.options);
				this.callback=JSON.stringify(json);
			},
			/**
			 * 发送数据到USB端口
			 * @param data 要发送到端口的数据
			 * @param format 数据的格式 String or HxeString
			 * @param intervalTime 轮询时间间隔 ms
			 * @return 成功或失败的提示，以JSON格式返回
			 */
			sned(){
				this.messageText="sned";
				this.$refs.message.open();
				let json;
				if(this.intervalTime!=0 && this.intervalTime!="0"){
					json = usbSerial.snedData(this.snedData,this.formatS,this.intervalTime);
				}else{
					json = usbSerial.snedData(this.snedData,this.formatS);
				}	
				this.callback=JSON.stringify(json);
			},
			/**
			 * 读取USB端口数据
			 * @param format 数据的格式 String or HxeString
			 * @param readLength 读取数据的长度（16进制位数）
			 * @return 读取的数据，以JSON格式返回
			 */
			read(){
				this.messageText="read";
				this.$refs.message.open();
				let json = usbSerial.readData(this.formatR,this.readLength);
				this.callback=JSON.stringify(json);
			},
			/**
			 * 添加USB端口监听器
			 * @param format 返回值格式 String or HexString
			 * @return 成功或失败的提示，以JSON格式返回
			 */
			addUsblistener(){
				this.messageText="addUsblistener";
				this.$refs.message.open();
				this.setUDPSend();
				this.setExplain();
				let json = usbSerial.addUsblistener(this.formatL);
				this.callback=JSON.stringify(json);
				
			},
			setUDPSend(){
				usbSerial.setUDPSend("CarCode","192.168.10.230",44555,true);
			},
			setExplain(){
				usbSerial.setExplain(true);
			}
		}
	}
</script>

<style>
	.content {
		font-size: 24rpx;
	}
	.content textarea {
		border:1px solid;
		width:92%;
		margin: 5px;
		padding: 10rpx;
	}
	.callback {
		background-color: black;color: chartreuse;padding: 10px;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
